<!-- 饼图 -->
<template>
  <div class="class_default" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '@/views/dashboard/mixins/resize'

  export default {
    name: "twsPieChart",
    mixins: [resize],
    props: {
      chartData: {
        type: Object,
        default() {
          return {
            title: '',  // 图表标题
            pieData: []  // 饼图数据
          }
        }
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      // 创建图表
      this.chart = echarts.init(this.$el, 'macarons')
      this.$nextTick(() => {
        // 加载图表数据
        this.setChartData()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    // 监听到图表数据变化，处理数据并重新渲染图表
    watch: {
      chartData: {
        handler(chartData) {
          this.chartData = chartData;
          this.setChartData()
        },
        // immediate: true,
        deep: true  // 针对于对象，深度监听
      }
    },
    methods: {
      // 加载图表数据
      setChartData() {
        this.chart.setOption({
          //【title组件】：图表标题
          title: {
            text: this.chartData.title,
            x: 'left',
            y: 'top',
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: '#333'  // 主标题文字颜色
            },
          },
          //【legend组件】：图例
          legend: {
            left: 'center',
            bottom: '-5'
          },
          //【tooltip组件】：提示框
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          // series(系列)
          series: [{
            // name: '',
            type: 'pie',
            roseType: 'radius',
            // startAngle: 180,  //起始角度，支持范围[0, 360]
            // minAngle: 50,  //设置扇形的最小占比
            radius: [20, 90],  // 设置环形饼状图，第一个数设置内圈大小，第二个数设置外圈大小
            center: ['50%', '50%'], // 设置饼状图位置，第一个数调水平位置，第二个数调垂直位置
            data: this.chartData.pieData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal:{
                label:{
                  show: true,
                  formatter: '{b} ({d}%)'
                },
                labelLine: {
                  show: true
                }
              }
            },
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }]
        })
      }
    }
  }
</script>

<style scoped>
  .class_default {
    width: 100%;
    height: 300px;
  }
</style>
